<template>
    <div class="table">
        <div class="container">
          <el-row>
            <el-col :span="6">
              <fancy-sys-category-tree
                v-model="currentTreeValue"
                :modelName="modelName"
                :currentTreeName.sync="currentTreeName"
                @select="handlerSelect"
              >
              </fancy-sys-category-tree>
            </el-col>
            <el-col :span="18">
              <el-card class="right-card">
                <div class="handle-box">
                    <el-button type="primary" size="mini" class="handle-del mr10" @click="add">新增</el-button>
                    <el-input v-model="keyword" size="mini" placeholder="筛选名称" class="handle-input mr10"></el-input>
                    <el-button type="primary" size="mini" icon="search" @click="query">筛选</el-button>
                </div>
                <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                    <el-table-column type="index" label="序号" align="center" width="50"/>
                        <el-table-column prop="fdName" label="模板名称" sortable />
                        <el-table-column prop="fdCategoryName" label="分类名称" sortable width="150"/>
                        <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
                    <el-table-column label="操作" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary"  size="mini" @click="handleView(scope.row)">查看</el-button>
                            <el-button  size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="danger"  size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
import fancySysCategoryTree from '@/components/form/FancySysCategoryTree'
import dateUtil from '@/utils/dateUtils';
import formUtil from '@/utils/formUtils';
export default {
    name: 'sysFormTemplateList',
    components:{
      fancySysCategoryTree
    },
    data() {
        return {
          currentTreeValue:'',
          currentTreeName:'',
          modelName:'com.fancy.application.sys.form.entity.SysFormMain',
          tableData:{
              keyword: '',
              size:0,
              total:0,
              current:1,
              records: []
          },
          keyword: ''
        }
    },
    created() {
        this.getData();
    },
    methods: {
        add() {
            if(!formUtil.isNotEmpty(this.currentTreeValue)){
                this.$message({
                message: '请先选择模板分类！',
                type: 'warning'
                });
                return ;
            }
            const params = {
                path: "/sys/form/sys_form_template/edit",
                query: {
                    fdCategoryId:this.currentTreeValue,
                    fdCategoryName:this.currentTreeName
                }
            }
            this.$common.openTag(params);
        },
        getData() {
            this.$post('/api/sys/form/sys_form_template/list',{
                keyword: this.tableData.keyword,
                current: this.tableData.current,
                fdCategoryId:this.currentTreeValue
            }).then((res) => {
                this.tableData = res.data;
            });
        },
        query(){
            this.tableData.keyword = this.keyword;
            this.getData();
        },
        dateFormat(obj,column){
            return dateUtil.format(obj.fdCreateTime);
        },
        handleEdit(row){
            let id = row.fdId;
            const params = {
                path: "/sys/form/sys_form_template/edit",
                query: {
                  id:id,
                  fdCategoryId:this.currentTreeValue,
                  fdCategoryName:this.currentTreeName
                }
            }
            this.$common.openTag(params);
        },
        handleView(row){
            let id = row.fdId;
            const params = {
                path: "/sys/form/sys_form_template/view",
                query: {
                  id:id
                }
            }
            this.$common.openTag(params);
        },
        handleDelete(index,row){
            this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                this.$delete('/api/sys/form/sys_form_template',{
                    id:row.fdId
                }).then((res) => {
                    this.tableData.records.splice(index,1)
                    this.$message({type:'success',message:'删除成功!'})
                });
            })
        },
        handleCurrentChange(value){
            this.tableData.current = value;
            this.tableData.keyword = this.keyword;
            this.getData();
        },
        handlerSelect(data,id,name){
          /**选择tree的回调函数 */
          this.getData();
        }
    }
}
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
